<template>
	<view class="fusion_record">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714">
			<template v-slot:center>
				<view class="center_slot">合成记录</view>
			</template>
		</uv-navbar>
		<view class="content">
			<view class="item" v-for="item in _this.list">
				<image :src="item.product_cover" class="cover"></image>
				<view class="item_view">
					<view class="name">【{{item.product_name}}】</view>
					<view class="time">合成时间:{{item.created_at}}</view>
					<view class="key">合成材料</view>
					<view class="item_cell">
						<view class="cell" v-for="dataItem in item.compose.need">
							<view class="cell_name">{{dataItem.product.name}}</view>
							<view class="number">*{{dataItem.number}}</view>
						</view>
					</view>
				</view>
			</view>
			<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />
		</view>
	</view>
</template>

<script setup>
	import {
		composeRecord
	} from "@/request/api";
	import {
		onReachBottom
	} from "@dcloudio/uni-app";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();
	const getList = async () => {
		let {
			list
		} = await composeRecord({
			page: _this.page,
			limit: _this.limit,
		});
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();
	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};
	onReachBottom(() => loadmore());
</script>

<style scoped lang="scss">
	.fusion_record {
		.center_slot {
			color: #FFFFFF;
			font-size: 18px;
			font-weight: bold;
		}

		.content {
			padding: 0 20rpx;
			box-sizing: border-box;

			.item {
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 30rpx 30rpx 20rpx 20rpx;
				box-sizing: border-box;
				background: #2E2E2E;
				display: flex;

				.cover {
					width: 196rpx;
					height: 196rpx;
				}

				.item_view {
					flex: 1;
					padding-left: 30rpx;
					box-sizing: border-box;
					overflow: hidden;

					.name {
						color: #FFFFFF;
						font-size: 32rpx;
						font-weight: 800;
					}

					.time {
						color: #999999;
						font-size: 26rpx;
						margin: 20rpx 0;
					}

					.key {
						color: #FFFFFF;
						font-size: 26rpx;
					}

					.item_cell {
						border-radius: 10rpx;
						margin-top: 20rpx;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
						background: rgba(17, 17, 17, 0.5);
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.cell {
							width: 50%;
							padding: 11rpx 0;
							// margin-bottom: 22rpx;
							padding-left: 15rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;

							.cell_name {
								color: #EEEEEE;
								font-size: 26rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.number {
								color: #EEEEEE;
								font-size: 26rpx;
							}
						}
					}
				}
			}
		}
	}
</style>